<template>
  <div class="app-container">
    <el-form label-width="100px" class="form-table">
      <el-row>
        <el-col :span="6">
          <el-form-item label="状态">
            {{ borrower.status }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建时间">
            {{ borrower.createTime }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="姓名">
            {{ borrower.name }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别">
            {{ borrower.sex }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年龄">
            {{ borrower.age }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机">
            {{ borrower.mobile }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="学历">
            {{ borrower.education }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否结婚">
            {{ borrower.marry }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="行业">
            {{ borrower.industry }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="还款来源">
            {{ borrower.returnSource }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="身份证号">
            {{ borrower.idCard }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人名称">
            {{ borrower.contactsName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人手机">
            {{ borrower.contactsMobile }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人关系">
            {{ borrower.contactsRelation }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="身份证正面">
            <span v-for="item in borrower.borrowerAttachVOList" :key="item.id">
              <el-image
                v-if="item.imageType == 'idCard1'"
                style="width: 150px;"
                :src="item.imageUrl"
                :preview-src-list="[item.imageUrl]"
              />
            </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="身份证反面">
            <span v-for="item in borrower.borrowerAttachVOList" :key="item.id">
              <el-image
                v-if="item.imageType == 'idCard2'"
                style="width: 150px;"
                :src="item.imageUrl"
                :preview-src-list="[item.imageUrl]"
              />
            </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="房产信息">
            <span v-for="item in borrower.borrowerAttachVOList" :key="item.id">
              <el-image
                v-if="item.imageType == 'house'"
                style="width: 150px;"
                :src="item.imageUrl"
                :preview-src-list="[item.imageUrl]"
              />
            </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="车辆信息">
            <span v-for="item in borrower.borrowerAttachVOList" :key="item.id">
              <el-image
                v-if="item.imageType == 'car'"
                style="width: 150px;"
                :src="item.imageUrl"
                :preview-src-list="[item.imageUrl]"
              />
            </span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form label-width="170px" v-if="borrower.status === '认证中'">
        <el-form-item label="是否通过">
          <el-radio-group v-model="approvalForm.status">
            <el-radio :label="2">
              通过
            </el-radio>
            <el-radio :label="-1">
              不通过
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-if="approvalForm.status == 2" label="基本信息积分">
          <el-input v-model="approvalForm.infoIntegral" style="width: 140px;"/>
          <span style="color: indianred">（可获取30至100积分）</span>
        </el-form-item>

        <el-form-item v-if="approvalForm.status == 2" label="身份证信息是否正确">
          <el-radio-group v-model="approvalForm.isIdCardOk">
            <el-radio :label="true">
              是
            </el-radio>
            <el-radio :label="false">
              否
            </el-radio>
          </el-radio-group>
          <span style="color: indianred">（可获得积分30积分）</span>
        </el-form-item>

        <el-form-item v-if="approvalForm.status == 2" label="车辆信息是否正确">
          <el-radio-group v-model="approvalForm.isCarOk">
            <el-radio :label="true">
              是
            </el-radio>
            <el-radio :label="false">
              否
            </el-radio>
          </el-radio-group>
          <span style="color: indianred">（可获得积分60积分）</span>
        </el-form-item>

        <el-form-item v-if="approvalForm.status == 2" label="房产信息是否正确">
          <el-radio-group v-model="approvalForm.isHouseOk">
            <el-radio :label="true">
              是
            </el-radio>
            <el-radio :label="false">
              否
            </el-radio>
          </el-radio-group>
          <span style="color: #cd5c5c">（可获得积分100积分）</span>
        </el-form-item>


      </el-form>
      <el-row style="text-align:center">
        <el-button v-if="borrower.status === '认证中'" type="primary" @click="approvalSubmit()">
          确定
        </el-button>
        <el-button @click="back">
          返回
        </el-button>
      </el-row>
    </el-form>


  </div>
</template>
<script>
  // 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
  import borrowerApi from '@/api/core/borrower'
  // 例如: import《组件名称》from'《组件路径》';
  export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    props: {},
    data() {
      // 这里存放数据
      return {
        borrower: {},
        saveBtnDisabled: false,
        approvalForm: {
          borrowerId: 0,
          status: 2,
          content: '',
          infoIntegral: 30,
          isIdCardOk: false,
          isHouseOk: false,
          isCarOk: false
        }
      }
    },
    // 计算属性类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法的集合
    methods: {
      // 根据id查询记录
      fetchDataById() {
        borrowerApi.showBorrowerDetail(this.$route.params.id).then(response => {
          this.borrower = response.data.borrowerDetailVO
        })
      },

      back() {
        this.$router.push({ path: '/core/borrower/list' })
      },

      approvalSubmit() {
        this.saveBtnDisabled = true
        this.approvalForm.borrowerId = this.$route.params.id
        borrowerApi.approval(this.approvalForm).then(response => {
          this.$message.success(response.message)
          this.$router.push({ path: '/core/borrower/list' })
        })
      }
    },
    // 生命周期-创建完成(可以访问当前this实例
    created() {
      if (this.$route.params.id) {
        this.fetchDataById()
      }
    },
    // 生命周期-挂载完成(可以访问poM元素
    mounted() {

    },
    // 生命周期-创建之前
    beforeCreate() {
    },
    // 生命周期-挂载之前
    beforeMount() {
    },
    // 生命周期-更新之前
    beforeUpdate() {
    },
    // 生命周期-更新之后
    updated() {
    },
    // 生命周明-销毁之前
    beforeDestroy() {
    },
    // 生命周期-销毁完成
    destroyed() {
    },
    // 如果页面有keep- alive缓存功能,这个函数会触发
    activated() {
    }
  }
</script>
<style scoped>

</style>
